<template>
  <div>
    <div class="div1">
     
    <div class="div1">
      <el-card class="box-card1">
        <div class="box1"><img src="../../assets/LOGO/u12.png" alt=""></div>        
        <div class="box2"><b>2</b></div>
        <div class="box3"><b>入职人数</b></div>
        <el-divider></el-divider>
        
      </el-card>

      <el-card class="box-card2">
                <div class="box1"><img src="../../assets/LOGO/u21.png" alt=""></div>        
        <div class="box2" style="color:#51CD97"><b>0</b></div>
        <div class="box3"><b>离职人数</b></div>
        <el-divider></el-divider>
        
      </el-card>

      <el-card class="box-card3">
        <b style="color: white;font-size:50px;">2000</b>
        <p style="color: white;font-size:20px;"><b>员工总人数</b></p>
        
      </el-card>
    </div>
    <div class="div2">
      <el-card class="box-card2-1">
        <b class="bbb">员工年龄比</b>
        <div class="divgongling"></div>
        <div>
          <el-row class="row1">
            <el-col :span="3"><span>18~24岁</span></el-col>
            <el-col :span="17"
              ><el-progress
                color="#78C32C"
                :stroke-width="15"
                :percentage="40"
              ></el-progress
            ></el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="3"><span>25~29岁</span></el-col>
            <el-col :span="17"
              ><el-progress
                color="#78C32C"
                :stroke-width="15"
                :percentage="20"
              ></el-progress
            ></el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="3"><span>30~39岁</span></el-col>
            <el-col :span="17"
              ><el-progress
                color="#78C32C"
                :stroke-width="15"
                :percentage="27"
              ></el-progress
            ></el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="3"><span>40~49岁</span></el-col>
            <el-col :span="17"
              ><el-progress
                color="#78C32C"
                :stroke-width="15"
                :percentage="10"
              ></el-progress
            ></el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="3"><span>50岁以上</span></el-col>
            <el-col :span="17"
              ><el-progress
                color="#78C32C"
                :stroke-width="15"
                :percentage="3"
              ></el-progress
            ></el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card2-2">
        <b class="bbb">工龄比</b>
        <div id="div2" class="bingzhaungtu"></div>
      </el-card>

    </div>
      <el-card class="box-card2-3">
        <b class="bbb">部门人数</b>
        <div id="div4" class="zhuzhuang"></div>
      </el-card>

      <el-card class="box-card2-4">
        <b class="bbb">离职人数</b>
        <div id="div3" class="zhexian"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    this.echartsInit();
    this.zhexian();
    this.zhuzhuang();
  },
  methods: {
    //饼状图
    echartsInit() {
      echarts.init(document.getElementById("div2")).setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 20,
          left: "center",
          data: ["1~3年", "4~6年", "7~9年", "10年以上"],
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "40%"],
            selectedMode: "single",
            data: [
              { value: 12.5, name: "10年以上" },
              { value: 12.5, name: "7~9年" },
              { value: 25, name: "4~6年" },
              { value: 50, name: "1~3年" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    //折线图
    zhexian() {
      echarts.init(document.getElementById("div3")).setOption({
        tooltip: {
          trigger: "axis",
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          top:"10%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "tokyo",
            type: "line",
            stack: "Total",
            data: [10, 1500, 1000, 10, 10, 10, 10, 2000, 2500, 1500, 900, 800],
          },
        ],
      });
    },
    //柱状图
    zhuzhuang() {
      echarts.init(document.getElementById("div4")).setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          top:"10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["人事部", "财务部", "市场部", "运营部", "运输部"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [200, 500, 750, 4500, 2000],
          },
        ],
      });
    },
  },
  created() {},
  computed: {},
};
</script>
<style  scoped>
.div1 {
  width: 100%;
  height: 175px;
}
.div2 {
  width: 100%;
  height: 100%;
}
.box-card1 {
  width: 25%;
  height: 150px;
  float: left;
}
.box-card2 {
  width: 25%;
  height: 150px;
  float: left;
  margin-left: 6%;
  
}
.box-card3 {
  width: 25%;
  height: 150px;
  float: left;
  margin-left: 6%;
  background-color: #69a5fa;
  
}

.box-card2-1 {
  width: 45%;
  float: left;
}
.box-card2-2 {
  width: 40%;
  float: left;
  margin-left: 2%;
}
.box-card2-3 {
  width: 45%;
  float: left;
  margin-top: 1%;
}
.box-card2-4 {
  width: 40%;
  float: left;
  margin-top: 1%;
  margin-left: 2%;
}
.bingzhaungtu {
  width: 100%;
  height: 260px;
}
.zhexian {
  width: 100%;
  height: 170px;
}
.zhuzhuang {
  width: 100%;
  height: 170px;
}
.divgongling {
  width: 100%;
  height: 35px;
  background-color: #f4f4f8;
  margin: 0 auto;
  margin-top: 38px;
}
.row1 {
  margin-top: 19px;
  margin-left: 10%;
}
.box1{
  float: left;
}
.box2{
  float: left;
  font-size: 55px;
  color: #F5CA28;
  margin-left: 20px;
}
.box3{
  float: right;
  margin-right: 10%;
  margin-top: 20px;
  color: #999999;

}
 .el-divider--horizontal{
     background: 0 0;
     border-top: 2px dashed #CCCCCC;
     float: left;
 }
 .bbb{
   color:#666666;
   font-size: 20px;
 }
</style>
